import React from 'react'
import * as d3 from "d3";
// import * as mock from 'mockjs'
import Pie from './Pie';

class basic extends React.Component {

    draw1 = () => {
        
        let marge = { top: 60, bottom: 60, left: 60, right: 60 }
        let dataset = [10, 20, 30, 23, 13, 40, 27, 35, 20];
        let svg = d3.select(".s3");
        let width = svg.attr("width");//得到画布的宽
        let height = svg.attr("height");//得到画布的长
        // //定义一个线性比例尺
        // var scaleLinear = d3.scaleLinear()
        //     .domain([0, d3.max(dataset)])
        //     .range([0, 300]);

        let xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .rangeRound([0, width - marge.left - marge.right]);
        let xAxis = d3.axisBottom(xScale);

        let yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([height - marge.top - marge.bottom, 0]);
        let yAxis = d3.axisLeft(yScale);
        
        let g = svg.append("g")
            .attr("transform", "translate(" + marge.top + "," + marge.left + ")");
        g.append("g")
            .attr("transform", "translate(" + 0 + "," + (height - marge.top - marge.bottom) + ")")
            .call(xAxis);
        g.append("g")
            .attr("transform", "translate(0,0)")
            .call(yAxis);

        //绘制矩形和文字
        let gs = g.selectAll(".rect")
            .data(dataset)
            .enter()
            .append("g");
        //绘制矩形
        var rectPadding = 20;//矩形之间的间隙
        gs.append("rect")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("width", function () {
                return xScale.step() - rectPadding;
            })
            .attr("height", function (d) {
                return height - marge.top - marge.bottom - yScale(d);
            })
            .attr("fill", "blue");
        //绘制文字
        gs.append("text")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("dx", function () {
                return (xScale.step() - rectPadding) / 2;
            })
            .attr("dy", 20)
            .text(function (d) {
                return d;
            })
    }

    componentDidMount() {
        this.draw1()
    }
    render() {
        return (<div style={{ width: '500px', height: "280px" }}>
            <svg className="s3" width="960" height="250"></svg>
            <Pie/>
        </div>)
            
            
    }
}

export default basic